<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" th:href="@{/static/admin/demos/treetable/assets/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/admin/demos/treetable/assets/common.css}"/>
</head>
<body>
<div class="layui-container">
    <br><br>
    <a class="layui-btn layui-btn-normal" th:href="@{/admin/demos/treetable/index}">&lt;&lt;返回</a>
    &nbsp;&nbsp;
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn" id="btn-fold">全部折叠</button>
        <button class="layui-btn" id="btn-refresh">刷新表格</button>
    </div>

    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{/static/admin/demos/treetable/assets/layui/layui.js}"></script>
<!-- 由于thymeleaf会把[[...]]这种形式的二位数组中的内容作为内联取值块解析，而不是数组，由此抛出异常。
	所以在script标签中加入 th:inline="none" 或者 th:inline="text" 来避免这个问题 -->
<script th:inline="none">
    layui.config({
        base: '/static/admin/demos/treetable/module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer','table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {
	        layer.load(2);
	        treetable.render({
	            treeColIndex: 1,
	            treeSpid: -1,
	            treeIdName: 'authorityId',
	            treePidName: 'parentId',
	            elem: '#auth-table',
	            url: '/static/admin/demos/treetable/json/menus.json',
	            page: false,
	            cols: [[
	                {type: 'numbers'},
	                {field: 'authorityName', minWidth: 200, title: '权限名称'},
	                {field: 'authority', title: '权限标识'},
	                {field: 'menuUrl', title: '菜单url'},
	                {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
	                {
	                    field: 'isMenu', width: 80, align: 'center', templet: function (d) {
	                        if (d.isMenu == 1) {
	                            return '<span class="layui-badge layui-bg-gray">按钮</span>';
	                        }
	                        if (d.parentId == -1) {
	                            return '<span class="layui-badge layui-bg-blue">目录</span>';
	                        } else {
	                            return '<span class="layui-badge-rim">菜单</span>';
	                        }
	                    }, title: '类型'
	                },
	                {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
	            ]],
	            done: function () {
	                layer.closeAll('loading');
	            }
	        });
        };
        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#auth-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#auth-table');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });
        
        //监听工具条
        table.on('tool(auth-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
			//进行相应的操作后刷新列表
            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
                renderTable();
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
                renderTable();
            }
        });
    });
</script>
</body>
</html>